(function($) {
	var layout = function(el, options) {
		var $this = $(el);
		var opts = options;
		var layout = {};
		$.extend(this, {
			init : init,
			getApi : function(e) {
				return $this;
			},
			setOpts : function(options) {
				opts = $.extend( {}, opts, options);
				$this.css(opts);
			},
			getOpts : function() {
				return opts;
			}
		});
		function init() {
			if ($this[0].tagName == "BODY") {
				$("html").css( {
					height : "100%",
					overflow : "hidden"
				});
				$("body").css( {
					height : "100%",
					overflow : "hidden"
				});
			}
			$this.addClass("layout");
			$this.css( {
				margin : 0,
				padding : 0
			});
			layout.north = createPanels("north", opts.north);
			layout.south = createPanels("south", opts.south);
			layout.east = createPanels("east", opts.east);
			layout.west = createPanels("west", opts.west);
			layout.center = createPanels("center", opts.center);
			wrapperSite();
			// windows resize
			$(window).resize(function() {
				wrapperSite();
			});
		}
		// create panel
		function createPanels(dir, cpos) {
			var panel = $this.find("#" + dir);
			if (panel.length == 0) {
				return;
			}
			cpos.cls = "layout-panel layout-panel-" + dir + " layout-split";
			var moveStyle = {};
			if (dir == "north") {
				// Whether to change the size of the
				if (cpos.split) {
					cpos.handles = "s";
					moveStyle = {
						helper : true,
						helperStyle : "layout-move-north"
					};
				}
				cpos.style = {
					"border-bottom" : opts.edge + "px solid"
				};
				cpos.height = parseInt(panel.css("height")) || cpos.height;
			} else if (dir == "south") {
				// Whether to change the size of the
				if (cpos.split) {
					cpos.handles = "n";
					moveStyle = {
						helper : true,
						helperStyle : "layout-move-south"
					};
				}
				cpos.style = {
					"border-top" : opts.edge + "px solid"
				};
				cpos.height = parseInt(panel.css("height")) || cpos.height;
			} else if (dir == "east") {
				// Whether to change the size of the
				if (cpos.split) {
					cpos.handles = "w";
					moveStyle = {
						helper : true,
						helperStyle : "layout-move-east"
					};
				}
				cpos.style = {
					"border-left" : opts.edge + "px solid"
				};
				cpos.width = parseInt(panel.css("width")) == parseInt($this
						.css("width")) ? cpos.width : parseInt(panel
						.css("width"));
			} else if (dir == "west") {
				// Whether to change the size of the
				if (cpos.split) {
					cpos.handles = "e";
					moveStyle = {
						helper : true,
						helperStyle : "layout-move-west"
					};
				}
				cpos.style = {
					"border-right" : opts.edge + "px solid"
				};
				cpos.width = parseInt(panel.css("width")) == parseInt($this
						.css("width")) ? cpos.width : parseInt(panel
						.css("width"));
			}
			// Create Panel
			var panels = panel.panel(cpos);
			// Setting the border color can be moved
			panels.getApi().css("border-color",
					panels.getApi().css("borderColor"));
			if (cpos.handles) {
				// Custom size panels can be moved
				panels.getApi().resizable( {
					handles : cpos.handles,
					helper : moveStyle.helper,
					helperStyle : moveStyle.helperStyle,
					maxWidth : cpos.maxSize,
					minWidth : cpos.minSize,
					maxHeight : cpos.maxSize,
					minHeight : cpos.minSize,
					onStopResize : function() {
						if (dir == "north") {
							layout.north.setOpts( {
								width : this.css("width"),
								height : this.css("height")
							});
						} else if (dir == "south") {
							layout.south.setOpts( {
								width : this.css("width"),
								height : this.css("height")
							});
						} else if (dir == "east") {
							layout.east.setOpts( {
								width : this.css("width"),
								height : this.css("height")
							});
						} else if (dir == "west") {
							layout.west.setOpts( {
								width : this.css("width"),
								height : this.css("height")
							});
						}
						// Relocate panel
					wrapperSite();
				}
				});
			}
			return panels;
		}
		// Locate all of the panel
		function wrapperSite() {
			var cpos = {
				top : 0,
				left : 0,
				width : $this.width(),
				height : $this.height()
			};
			function southSite(dir) {
				if (!dir) {
					return;
				}
				dir.setOpts( {
					width : cpos.width,
					height : parseInt(dir.getOpts().height),
					top : cpos.height - parseInt(dir.getOpts().height),
					left : 0
				});
				cpos.height -= parseInt(dir.getOpts().height) + opts.edge;
			}
			function northSite(dir) {
				if (!dir) {
					return;
				}
				dir.setOpts( {
					width : cpos.width,
					height : parseInt(dir.getOpts().height),
					top : 0,
					left : 0
				});
				cpos.top += parseInt(dir.getOpts().height) + opts.edge;
				cpos.height -= parseInt(dir.getOpts().height);
			}
			function eastSite(dir) {
				if (!dir) {
					return;
				}
				cpos.width -= parseInt(dir.getOpts().width) + opts.edge;
				dir.setOpts( {
					width : parseInt(dir.getOpts().width),
					height : cpos.height,
					top : cpos.top,
					left : cpos.width
				});
			}
			function westSite(dir) {
				if (!dir) {
					return;
				}
				dir.setOpts( {
					width : parseInt(dir.getOpts().width),
					height : cpos.height,
					top : cpos.top,
					left : 0
				});
				cpos.width -= parseInt(dir.getOpts().width) + opts.edge;
				cpos.left = parseInt(dir.getOpts().width) + opts.edge;
			}
			function centerSite(dir) {
				if (!dir) {
					return;
				}
				dir.setOpts( {
					width : cpos.width,
					height : cpos.height,
					top : cpos.top,
					left : cpos.left
				});
			}
			southSite(layout.south);
			northSite(layout.north);
			eastSite(layout.east);
			westSite(layout.west);
			centerSite(layout.center);
		}
	};
	$.fn.layout = function(options) {
		var el = this.eq(typeof options == 'number' ? options : 0).data(
				"layout");
		if (el) {
			return el;
		}
		var _opts = $.extend(true, $.fn.layout.defaults, options);
		var opts = $.meta ? $.extend( {}, _opts, this.data()) : _opts;
		this.each(function() {
			el = new layout(this, opts);
			el.init();
			$(this).data("layout", el);
		});
		return opts.api ? el : this;
	};
	$.fn.layout.defaults = {
		api : true,
		cls : null,
		width : "auto",
		height : "auto",
		left : null,
		top : null,
		edge : 5,
		north : {
			height : 50,
			maxSize : 200,
			minSize : 30,
			split : true,
			footer : false
		},
		south : {
			height : 50,
			maxSize : 200,
			minSize : 30,
			split : true,
			footer : false
		},
		west : {
			width : 150,
			maxSize : 500,
			minSize : 100,
			split : true,
			footer : false
		},
		east : {
			width : 100,
			maxSize : 500,
			minSize : 100,
			split : true,
			footer : false
		},
		center : {}
	};
})(jQuery);
(function($) {
	var panels = function(els, options) {
		var panelBody = $(els), self = this, opts = options, panel = null;
		$.extend(this, {
			init : init,
			getApi : function(e) {
				return panel;
			},
			setOpts : function(options) {
				opts = $.extend( {}, opts, options);
				rSize();
			},
			getOpts : function() {
				return opts;
			}
		});
		function init() {
			panel = panelBody.addClass("panel-body").wrap(
					'<div class="panel"></div>').parent();
			panel.css(opts.style);
			panel.addClass(opts.cls);
			panelBody.addClass(opts.bodyCls);
			rToolBar();
			rSize();
		}
		// Setting Toolbar
		function rToolBar() {
			opts.deltaWidth = panelBody.outerWidth() - panelBody.width();
			opts.deltaHeight = panelBody.outerHeight() - panelBody.height();
			// Setting HeaderToolbar
			if (opts.title) {
				var headerBar = $(
						"<div class=\"panel-header\"><div class=\"panel-title\">"
								+ opts.title + "</div></div>").prependTo(panel);
				opts.deltaHeight += headerBar.outerHeight();
			}
			// Setting FooterToolbar
			if (opts.footer) {
				var footerBar = $("<div class=\"panel-footer\">&nbsp;ff</div>");
				panelBody.addClass("panel-body-footer");
				panel.append(footerBar);
				opts.deltaHeight += footerBar.outerHeight();
			}
		}
		function rSize() {
			panel.css( {
				width : opts.width,
				height : opts.height,
				left : opts.left,
				top : opts.top
			});
			if (!isNaN(opts.height)) {
				panelBody.css( {
					height : opts.height - parseInt(opts.deltaHeight)
				});
			}
			if (!isNaN(opts.width)) {
				panelBody.css( {
					width : opts.width - parseInt(opts.deltaWidth)
				});
			}
			panelBody.css( {
				margin : 0,
				padding : 0
			});

		}
	};
	$.fn.panel = function(options) {
		var panel = this.eq(typeof options == 'number' ? options : 0).data(
				"panel");
		if (panel) {
			return panel;
		}
		var _opts = $.extend( {}, $.fn.panel.defaults, {
			width : (parseInt($(this).css("width")) || undefined),
			height : (parseInt($(this).css("height")) || undefined),
			top : (parseInt($(this).css("top")) || undefined),
			left : (parseInt($(this).css("left")) || undefined),
			title : $(this).attr("title")
		}, options);
		var opts = $.meta ? $.extend( {}, _opts, this.data()) : _opts;
		this.each(function() {
			panel = new panels(this, opts);
			panel.init();
			$(this).data("panel", panel);
		});
		return opts.api ? panel : this;
	};
	$.fn.panel.defaults = {
		api : true,
		title : null,
		cls : null,
		headerCls : null,
		bodyCls : null,
		style : {},
		width : "auto",
		height : "auto",
		left : null,
		top : null,
		footer : false
	};
})(jQuery);